<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>表格</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/layui/layui.js"></script>
    <style type="text/css">
        .info {
            position: absolute;
            top: 15px;
            left: 80px;
            right: 160px;
        }
        
        .lay_check_b {
            margin-bottom: 10px;
        }
    </style>

    <body>
        <div class="layui-tab layui-tab-card" lay-filter="test">
            <ul class="layui-tab-title">
                <li class="layui-this">东胜区</li>
                <li>鄂托克旗</li>
                <li>伊金霍洛旗</li>
                <li>杭锦旗</li>
                <li>准格尔旗</li>
                <li>乌审旗</li>
                <li>鄂托克前旗</li>
                <li>达拉特旗</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <div class="layui-tab-item layui-show">
                    <table id="demo"></table>
                </div>
                <div class="layui-tab-item">2</div>
                <div class="layui-tab-item">3</div>
                <div class="layui-tab-item">4</div>
                <div class="layui-tab-item">5</div>
                <div class="layui-tab-item">6</div>
                <div class="layui-tab-item">7</div>
                <div class="layui-tab-item">8</div>
            </div>
        </div>
        <script type="text/javascript">
            layui.use(['element', 'table'], function() {
                var $ = layui.jquery,
                    table = layui.table,
                    element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

                element.on('tab(test)', function(data) {
                    console.log(this); //当前Tab标题所在的原始DOM元素
                    console.log(data.index); //得到当前Tab的所在下标
                    console.log(data.elem); //得到当前的Tab大容器
                });
                //展示已知数据
                table.render({
                    elem: '#demo',
                    data: [{
                        "id": "10001",
                        "username": "杜甫",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "116",
                        "ip": "192.168.0.8",
                        "logins": "108",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10002",
                        "username": "李白",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "12",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14",
                        "LAY_CHECKED": true
                    }, {
                        "id": "10003",
                        "username": "王勃",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "65",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10004",
                        "username": "贤心",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "666",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10005",
                        "username": "贤心",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "86",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10006",
                        "username": "贤心",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "12",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10007",
                        "username": "贤心",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "16",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }, {
                        "id": "10008",
                        "username": "贤心",
                        "email": "xianxin@layui.com",
                        "sex": "男",
                        "city": "浙江杭州",
                        "sign": "人生恰似一场修行",
                        "experience": "106",
                        "ip": "192.168.0.8",
                        "logins": "106",
                        "joinTime": "2016-10-14"
                    }],
                    height: 272,
                    cols: [
                        [ //标题栏
                            {
                                checkbox: true,
                                LAY_CHECKED: true
                            } //默认全选
                            , {
                                field: 'id',
                                title: 'ID',
                                width: 80,
                                sort: true
                            }, {
                                field: 'username',
                                title: '用户名',
                                width: 120
                            }, {
                                field: 'email',
                                title: '邮箱',
                                width: 150
                            }, {
                                field: 'sign',
                                title: '签名',
                                width: 150
                            }, {
                                field: 'sex',
                                title: '性别',
                                width: 80
                            }, {
                                field: 'city',
                                title: '城市',
                                width: 100
                            }, {
                                field: 'experience',
                                title: '积分',
                                width: 80,
                                sort: true
                            }
                        ]
                    ],
                    skin: 'row' //表格风格
                        ,
                    even: true,
                    page: true //是否显示分页
                        ,
                    limits: [5, 7, 10],
                    limit: 5 //每页默认显示的数量
                });
            });
        </script>
    </body>

</html>